<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单圆形</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    #container {
        width: 100%;
        height: 100%;
    }
</style>

<body>
<div id="container"></div>
<script type="text/javascript">
    var center = new TMap.LatLng(39.984104, 116.307503);
    //初始化地图
    var map = new TMap.Map("container", {
        zoom: 12, //设置地图缩放级别
        center: center //设置地图中心点坐标
    });

    var circle = new TMap.MultiCircle({
        map,
        styles: { // 设置圆形样式
            'circle': new TMap.CircleStyle({
                'color': 'rgba(41,91,255,0.16)',
                'showBorder': true,
                'borderColor': 'rgba(41,91,255,1)',
                'borderWidth': 2,
            }),
        },
        geometries: [{
            styleId: 'circle',
            center: center, //圆形中心点坐标
            radius: 6500,	//半径（单位：米）
        }],
    });
</script>
</body>

</html>